<script setup>
import { reactive, ref, render } from "vue";
import deepClone from "../tools/deepClone.js";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const data = [
  {
    id:"1",
    msg:{
      a:"标题1",b:"https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF",c:""
    }
  },
  {
    id:"2",
    msg:{
      a:"标题2",b:"https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF",c:""
    }
  },
  {
    id:"3",
    msg:{
      a:"标题3",b:"https://t7.baidu.com/it/u=4283365501,347124022&fm=193&f=GIF",c:""
    }
  },
  {
    id:"4",
    msg:{
      a:"标题4",b:"https://t7.baidu.com/it/u=3195384123,421318755&fm=193&f=GIF",c:""
    }
  },
  {
    id:"5",
    msg:{
      a:"标题5",b:"https://t7.baidu.com/it/u=4037993762,1028356359&fm=193&f=GIF",c:""
    }
  }
];
const renderData = reactive([...deepClone(data),...deepClone(data),...deepClone(data)]);
const bgUrl = ref(renderData[0].msg.b);
const slide = ref(null);

function changeEndFn(eve){
  const slides = eve.slides;
  const index = eve.activeIndex;
  for(let i=0;i<slides.length;i++){
    slides[i].style.background = "";
  }
  slides[index].style.background = "red";

  bgUrl.value = slides[index].dataset.url;
}
function changeStartFn(eve){
  const index = eve.activeIndex;
  console.log(index);
  if(index >= 11){
    document.querySelector(".timeline .swiper-wrapper").style.cssText = "transition-duration: 0ms; transform: translate3d(0px, -300px, 0px); transition-delay: 0ms;"
    setTimeout(()=>{
      eve.slideTo(6);
    }, 0)
  }
  if(index <= 2){
    document.querySelector(".timeline .swiper-wrapper").style.cssText = "transition-duration: 0ms; transform: translate3d(0px, -600px, 0px); transition-delay: 0ms;"
    setTimeout(()=>{
      eve.slideTo(7);
    }, 0)
  }
}
</script>

<template>
  <div class="timeline" :style="{background: `url(${bgUrl})`}">
    <Swiper
      class="mySwiper"
      :loop="true"
      direction='vertical'
      :slidesPerView="5"
      :loopAdditionalSlides="2"
      :centeredSlides="true"
      :slideToClickedSlide="true"
      :createElements="true"
      :roundLengths="true"
      :runCallbacksOnInit="true"
      @slideChangeTransitionStart="changeStartFn"
      @slideChangeTransitionEnd="changeEndFn"
      @init="changeEndFn"
    >
      <SwiperSlide v-for="item in renderData" :key="item.id" ref="slide" :data-url="item.msg.b">
        {{ item.msg.a }}
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<style>
.timeline{
  width: 100%;
  height: 500px;
  padding: 20px;
}
.mySwiper{
  height: 500px;
  width: 200px;
  margin-left: 0;
}
.mySwiper .swiper-slide{
  width:120px;
  border-bottom:solid 1px #fff;
  box-sizing: border-box;
  line-height: 100px;
}
</style>